<template>
    <page-container :tabShow="true" @scrollCall="scrollIndex" @lowerCall="lowerIndex">
        <view slot="header">
            <!-- #ifdef H5 -->
            <view class="df-cen-sa index-serch-tab bg-qian-yellow" :style="[{ paddingTop: 10 + 'px', paddingRight: leftPaddingNum + 'px', paddingBottom: '0px' }]">
                <view class="indextopIcon">
                    <image :src="staticImgUrl + 'indexToplogo.png'" mode=""></image>
                </view>
                <view class="search-box" @click="toSearchindex()">
                    <view class="search-box-content df-ai-cen">
                        <image :src="staticImgUrl + 'chat/seach-icon.png'" mode="" style="width: 30rpx;height: 30rpx;margin-right: 20rpx;"></image>
                        <text>搜一搜，有好物</text>
                    </view>
                </view>
                <view class="df-col-cen top-icon-box" @click="jumpCatr" style="padding-top: 0rpx;">
                    <image :src="staticImgUrl + 'goods-cart.png'" mode="" class="top-icon"></image>
                    <view>购物车</view>
                </view>
            </view>
            <!-- #endif -->
            <!-- #ifdef MP-WEIXIN -->
            <view class="df-cen-sa index-serch-tab bg-qian-yellow" :style="[{ paddingTop: StatusBar + 'px', paddingRight: leftPaddingNum + 'px', paddingBottom: '5px', paddingLeft: '15rpx' }]">
                <view class="indextopIcon">
                    <image :src="staticImgUrl + 'indexToplogo.png'" mode=""></image>
                </view>
                <view class="df-col-cen top-icon-box" @click="jumpCatr">
                    <image :src="staticImgUrl + 'goods-cart.png'" mode="" class="top-icon"></image>
                    <view>购物车</view>
                </view>
                <view class="search-box" @click="toSearchindex()">
                    <view class="search-box-content df-ai-cen">
                        <image :src="staticImgUrl + 'chat/seach-icon.png'" mode="" style="width: 30rpx;height: 30rpx;margin-right: 20rpx;"></image>
                        <text>搜一搜，有好物</text>
                    </view>
                </view>
            </view>
            <!-- #endif -->

            <block>
                <!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
                <view class="tabClass">
                    <menu-tabs v-model="tabIndex" :tabs="tabs" v-if="tabs.length > 5" :fixed="true" :tab-width="142" @change="tabBtn" textColor="#222222" nameKey="category_name" backColor="#FFD332" lineColor="transparent" :fontTextSize="32" :fontTextSizeActive="35" :fontWeightStyle="700"></menu-tabs>
                    <menu-tabs v-model="tabIndex" :tabs="tabs" nameKey="category_name" v-else :fixed="false" @change="tabBtn" textColor="#222222" backColor="#FFD332" lineColor="transparent" :fontTextSize="32" :fontTextSizeActive="35" :fontWeightStyle="700"></menu-tabs>
                    <view class="classBtn">
                        <image :src="staticImgUrl + 'classBg.png'" mode=""></image>
                        <view class="fixedStyle" @click="jumpCalss()">
                            <div class="xmg-calssIcon">
                                <image :src="staticImgUrl + 'xmg-calss.png'" mode="" style="width: 100%;height: 100%;"></image>
                            </div>
                            <view style="font-size: 28rpx;">分类</view>
                        </view>
                    </view>
                </view>
            </block>
        </view>
        <view slot="center" style="height: 100%;">
            <swiper style="height:100%" :current="tabIndex" @change="swiperChange">
                <swiper-item v-for="(tab, i) in tabs" :key="i">
                    <block v-if="i == 0">
                        <mescroll-uni ref="mescrollRef" @init="mescrollInit" height="100%" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
                            <view class="index-content">
                                <block v-if="indexList.length > 0">
                                    <view v-for="(item, inx) in indexList" :key="inx">
                                        <block v-if="item.type == 'IMAGE_ADS' && item.list.length > 0">
                                            <view :class="item.list.length > 2 ? 'prl-30' : ''">
                                                <image-ads :imgList="item.list" :height="item.height" :width="item.width" :radiusType="true"></image-ads>
                                            </view>
                                        </block>
                                        <block v-if="item.type == 'GRAPHIC_NAV' && item.list.length > 0">
                                            <craphic-nav :navList="item.list" :padTop="20"></craphic-nav>
                                        </block>
                                        <block v-if="item.type == 'EYE_DISCOUNT' && item.list.length > 0">
                                            <xmg-discount-row :title="item.list[0].text" :desc="item.list[0].f_text" :link="item.list[0]"></xmg-discount-row>
                                        </block>
                                        <block v-if="item.type == 'TEXT_NAV' && item.list.length > 0">
                                            <text-nav :textList="item.list" :options="item"></text-nav>
                                        </block>
                                        <block v-if="item.type == 'LIVE_BROADCAST'">
                                            <live-broadsast></live-broadsast>
                                        </block>
                                        <block v-if="item.type == 'VIDEO'">
                                            <video-box></video-box>
                                        </block>
                                        <block v-if="item.type == 'RUBIK_CUBE' && item.list.length > 0">
                                            <rubik-cube :selectedTemplate="item.selectedTemplate" :rubikList="item.list"></rubik-cube>
                                        </block>
                                        <block v-if="item.type == 'SECKILL_LIST'">
                                            <seckill-list @seckillFn="seckillCall"></seckill-list>
                                        </block>
                                        <block v-if="item.type == 'DISCOUNT' && item.list.length > 0">
                                            <discount-list :bgimg="item.list[0].imageUrl" :height="item.height" :link="item.list[0].link.wap_url"></discount-list>
                                        </block>
                                        <block v-if="item.type == 'SHOP_SPECIAL' && item.list.length > 0">
                                            <shop-special :list="item.list"></shop-special>
                                        </block>
                                        <block v-if="item.type == 'EYE_CATCHING' && item.list.length > 0">
                                            <eye-catching :list="item.list"></eye-catching>
                                        </block>
                                        <!-- 										<block v-if="item.type == 'GOODS_CATEGORY'">
											<goods-category :lower="lowerType" ref="goodscategory"></goods-category>
										</block> -->
                                        <block v-if="item.type == 'GOODS_LIST'">
                                            <diy-goods-list :query="item"></diy-goods-list>
                                        </block>
                                    </view>
                                    <!-- 推荐商品 -->
                                    <block>
                                        <view class="">
                                            <!-- 											<view class="df-cen">
												<view class="goods-line"></view>
												<view class="goods-line-title">猜你喜欢</view>
												<view class="goods-line"></view>
											</view> -->
                                            <view class="cnxhicon">
                                                <image :src="staticImgUrl + 'youlikes.png'" mode=""></image>
                                            </view>
                                            <view style="padding: 20rpx;">
                                                <goods-waterfall-flow :allList="goodsList" @goodsFlowCall="goodsFlowBtn"></goods-waterfall-flow>
                                            </view>
                                            <view class="cu-load over" v-if="page_count && recommendObj.page >= page_count"></view>
                                        </view>
                                    </block>
                                </block>
                                <block v-else>
                                    <view class="df-col-cen">
                                        <image src="https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png" mode="widthFix" style="width: 50%;"></image>
                                        <text class="margin-top text-gray">数据加载中。。。</text>
                                    </view>
                                </block>
                            </view>
                        </mescroll-uni>
                    </block>
                    <!-- category_id -->
                    <block v-if="i > 0">
                        <home-goods :inx="i" :tab-arr="tabs"></home-goods>
                    </block>
                </swiper-item>
            </swiper>
            <!-- #ifdef H5 -->
            <block v-if="!isNativeApp()">
                <wx-config :shareContent="shareContent"></wx-config>
            </block>
            <!-- #endif -->
        </view>
    </page-container>
</template>

<script>
import ImageAds from '@/common/components/index/image-ads.vue' // 轮播图组件
import CraphicNav from '@/common/components/index/craphic-nav.vue' // 图文导航
import TextNav from '@/common/components/index/text-nav.vue' // 文本导航
import LiveBroadsast from '@/common/components/index/live-broadsast.vue' // 直播组件
import VideoBox from '@/common/components/index/video-box.vue' // 视频组件
import RubikCube from '@/common/components/index/rubik-cube.vue' // 魔方
import SeckillList from '@/common/components/index/seckill-list.vue' // 秒杀
import DiscountList from '@/common/components/index/discount-list.vue' // 超值折扣
import ShopSpecial from '@/common/components/index/shop-special.vue' // 超值折扣
import EyeCatching from '@/common/components/index/eye-catching.vue' // 醒目大牌
import GoodsCategory from '@/common/components/index/goods-category.vue' // 醒目大牌--商品分类
import DiyGoodsList from '@/common/components/index/diy-goods-list.vue' // 商品列表
import XmgDiscountRow from '@/common/components/index/xmg-discount-row.vue' // 醒目折扣一行
import goodsWaterfallFlow from '@/common/components/global/goods-waterfall-flow.vue' // 瀑布流组件
import HomeGoods from '@/common/components/index/home-goods.vue'
// #ifdef H5
import { mapGetters } from 'vuex'
import wxConfig from '@/common/components/global/wx-config.vue'
// #endif
import MescrollMixin from '@/components/mescroll/mescroll-mixins.js'
import MescrollMoreItemMixin from '@/components/mescroll/mixins/mescroll-more-item.js'
export default {
	mixins: [MescrollMixin, MescrollMoreItemMixin],
	data() {
		return {
			StatusBar: this.StatusBar,
			leftPaddingNum: 0,
			lowerType: false,
			indexObj: {
				app_type: 'h5',
				app_type_name: 'H5',
				web_city: 0,
				name: 'DIYVIEW_INDEX',
				site_id: 0
			},
			indexList: [],
			shareContent: {
				title: '醒目购', // 分享标题
				shareObjectDesc: '醒目购，够醒目，醒目就购啦！', // 分享描述
				thumbUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/logo.png' // 分享图标
			},
			goodsList: [],
			recommendObj: {
				page: 1,
				page_size: 10
			},
			page_count: null, // 总页数
			tabs: [],
			tabIndex: 0,
			categoryArr: [],
			categoryList: [],
			categoryInx: 0,
			goodsObj: {
				page: 0,
				page_size: 6,
				category_id: null,
				category_level: 1,
				web_city: 0
			},
			goodsObjName: '',
			recommendTypeTwo: false,
			categoryArrMpwx: [],
			mescroll: null,
			downOption: {
				auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
			},
			upOption: {
				auto: true, // 不自动加载
				noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				empty: {
					icon: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/home/empty.png',
					tip: this.tipText || '~空空如也~' // 提示
				}
			}
		}
	},
	components: {
		ImageAds,
		CraphicNav,
		TextNav,
		LiveBroadsast,
		VideoBox,
		RubikCube,
		SeckillList,
		DiscountList,
		ShopSpecial,
		EyeCatching,
		GoodsCategory,
		DiyGoodsList,
		XmgDiscountRow,
		goodsWaterfallFlow,
		HomeGoods,
		// #ifdef H5
		wxConfig
		// #endif
	},
	computed: {
		// #ifdef H5
		...mapGetters(['env'])
		// #endif
	},
	mounted() { },
	async onLoad(e) {
		// #ifdef H5
		uni.showLoading({
			title: '加载中'
		})
		// #endif
		// #ifdef MP-WEIXIN
		uni.getSystemInfo({
			success: res => {
				let modelStr = res.model
				let menuObj = uni.getMenuButtonBoundingClientRect()
				this.leftPaddingNum = res.windowWidth - menuObj.left
				// 判断是苹果刘海屏机型
				if (modelStr.indexOf('iPhone X') || modelStr.indexOf('iPhone10') || modelStr.indexOf('iPhone11')) {
					this.StatusBar = uni.getMenuButtonBoundingClientRect().top
				}
			}
		})
		// #endif
		this.initData()
		// #ifdef H5
		// console.log('logthis.env', this.env);
		// #endif
	},
	async onShow() { },
	methods: {
		// 初始化
		mescrollInit(e) {
			this.mescroll = e
		},
		/* 下拉刷新的回调 */
		downCallback(e) {
			// this.mescroll.resetUpScroll();
			if (this.tabIndex == 0) {
				this.$request.diyViewInfo(this.indexObj).then(res => {
					this.indexList = JSON.parse(res.data.value).value
				})
				this.getGoodsList()
			} else {
			}
		},
		/* 上拉加载的回调 */
		upCallback(page) {
			if (this.tabIndex == 0) {
				if (this.recommendType) return false
				this.recommendType = true
				this.recommendObj.page++
				this.getGoodsList()
			} else {
			}
		},
		goodsFlowBtn(val) {
			this.$util.redirectTo('/chatPages/message/message', {
				goods_id: val.sku_id,
				is_id: val.sku_id,
				type: 1
			})
		},
		// 点击分类
		tabBtn(val) {
			this.tabIndex = val
			// #ifdef MP-WEIXIN
			this.tabs.map((item, index) => {
				if (val == index) {
					if (item.category_name == '首页') {
						return false
					}
					if (item.category_name == '分类') {
						return false
					}
					this.goodsObj = {
						page: 1,
						page_size: 6,
						category_id: item.category_id,
						category_level: 1,
						web_city: 0
					}
					this.goodsObjName = item.category_name
					this.categoryArrMpwx = []
					// this.getGoodsListTwo()
				}
			})
			// #endif
		},
		initData() {
			let objs = {
				app_type: 'h5',
				app_type_name: 'H5',
				web_city: 0,
				name: 'DIYVIEW_INDEX',
				site_id: 0
			}

			this.$request.diyviewPreview(objs).then(res => {
				this.indexList = JSON.parse(res.data.value).value
			})

			this.getGoodsList()

			// 获取分类栏目
			this.$request
				.getScreenList({
					level: 1
				})
				.then(res => {
					// #ifdef H5
					if (res.length > 0) {
						this.tabs = res.data
						this.tabs.unshift({
							category_name: '首页'
						})
						this.tabs.push({
							category_name: '分类'
						})
						var categoryList = res.data
						this.categoryList = categoryList
						// 把分类作为数组的key，生成一个数组
						// res.forEach(item => {
						// 	if (item.category_name != '首页' && item.category_name != '分类') {
						// 		this.categoryArr[item.category_name] = [];
						// 	}
						// })
						this.goodsObjName = '家居生活'
						setTimeout(() => {
							this.preLoad()
						}, 500)
					}
					// #endif
					// #ifdef H5
					uni.hideLoading()
					// #endif
					// #ifdef MP-WEIXIN
					if (res.length > 0) {
						this.tabs = res.data
						this.tabs.unshift({
							category_name: '首页'
						})
						this.tabs.push({
							category_name: '分类'
						})
					}
					// #endif
				})
		},
		// 监听页面滚动事件
		scrollIndex(e) { },
		// 滚动到底部
		lowerIndex(e) {
			// 处理节流
			// if (!this.lowerType) {
			// 	this.lowerType = true;
			// 	setTimeout(() => {
			// 		this.lowerType = false;
			// 	}, 200);
			// }
		},
		// 猜你喜欢滚动到底部
		rightLower() {
			if (this.recommendType) return false
			this.recommendType = true
			this.recommendObj.page++
			this.getGoodsList()
		},
		// 分类商品信息滚动到底部
		rightLowerTwo() {
			if (this.recommendTypeTwo) return false
			this.recommendTypeTwo = true
			this.goodsObj.page++
			// this.getGoodsListTwo();
		},
		// 跳转到商品分类
		jumpCalss() {
			this.$util.redirectTo('/shopPages/goods/classification')
		},
		// 秒杀组件回调
		seckillCall(item) {
			this.$util.redirectTo('/shopPages/goods/seckill', {
				goods_id: item.id,
				is_id: item.sku_id
			})
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: '醒目就购了',
				path: '/pages/index/index',
				imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/logo.png'
			}
		},
		onShareTimeline(res) {
			return {
				title: '醒目就购了',
				path: '/pages/index/index',
				imageUrl: 'https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/logo.png'
			}
		},
		toSearchindex() {
			this.$util.redirectTo('/shopPages/searchindex/searchindex')
		},
		jumpCatr() {
			if (!this.$util.isLoginCall()) return false
			this.$util.redirectTo('/shopPages/goods/cart')
		},
		// 获取猜你喜欢
		getGoodsList() {
			if (!this.page_count || this.page_count && this.recommendObj.page < this.page_count) {
				this.$Apis.getGoodsSkuRecommend(this.recommendObj).then(res => {
					this.mescroll.endSuccess(res.list.length)
					this.recommendType = false
					this.page_count = res.page_count
					this.goodsList = this.goodsList.concat(res.list)
				})
			}
		},
		// 商品瀑布流回调
		goodsFlowBtn(item) {
			this.$util.redirectTo('/shopPages/goods/detail', {
				goods_id: item.sku_id,
				is_id: item.sku_id,
				type: 1
			})
		},
		// 切换分类
		swiperChange(e) {
			if (e.detail.current == 26) {
				this.tabIndex = 25
				return
			}
			this.tabIndex = e.detail.current
			this.tabs.map((item, index) => {
				if (e.detail.current == index) {
					if (item.category_name == '首页') {
						return false
					}
					if (item.category_name == '分类') {
						return false
					}
					this.goodsObj = {
						page: 1,
						page_size: 6,
						category_id: item.category_id,
						category_level: 1,
						web_city: 0
					}
					this.goodsObjName = item.category_name
				}
			})

		},
		// 获取分类商品信息
		getGoodsListTwo(name) {
			if (name == undefined) {
				name = this.goodsObjName
			}
			this.$request.getGoodssku(this.goodsObj).then(res => {
				// #ifdef H5
				// uni.hideLoading();
				// #endif
				if (this.goodsObj.page > 1) {
					if (res.data.list == '') {
						this.$util.tip('~没有更多了~')
						return false
					}
				}
				this.recommendTypeTwo = false

				// #ifdef H5
				this.categoryArr[name] = this.categoryArr[name].concat(res.data.list)
				this.$forceUpdate()
				// #endif

				// #ifdef MP-WEIXIN
				this.categoryArrMpwx = this.categoryArrMpwx.concat(res.data.list)
				// #endif

				// console.log("====================================================");
				// console.log(`${name}==>`, this.categoryArr[name])
				// console.log("====================================================");
			})
		},
		// 分类商品信息预加载
		preLoad() {
			let lengths = this.categoryList.length
			// for (var i = 1; i < lengths; i++) {
			// 	if (this.categoryList[i].category_name !== "首页" && this.categoryList[i].category_name !== "分类") {
			// 		(this.goodsObj = {
			// 			page: 1,
			// 			page_size: 6,
			// 			category_id: this.categoryList[i].category_id,
			// 			category_level: 1,
			// 			web_city: 0
			// 		}),
			// 		this.getGoodsListTwo(this.categoryList[i].category_name);
			// 	}
			// }
		}
	}
}
</script>

<style lang="scss">
.cnxhicon {
    width: 662rpx;
    height: 198rpx;
    margin: 0 auto;
}
.index-content {
    background-color: #fbf7f7;
    background-image: url("https://toc.nanyuecloud.com/toc-inst-app/zqanswer/test/img/xmg/index-top-bg.png");
    background-size: 100% 200rpx;
    background-repeat: no-repeat;
}

.prl-30 {
    padding: 10rpx 30rpx 0;
}

.index-content-bg {
    background-color: #fbf7f7;
}

.index-serch-tab {
    width: 100%;
    /* #ifdef H5 */
    padding: 0 30rpx;

    /* #endif */
    .search-box {
        flex: 1;
        padding: 0 26rpx;

        .search-box-content {
            width: 100%;
            height: 65rpx;
            padding: 30rpx;
            background: rgba(255, 255, 255, 0.24);
            border-radius: 40rpx;
            font-size: 24rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(102, 102, 102, 0.7);
        }
    }

    .top-icon-box {
        padding: 0 16rpx;
        /* #ifdef H5 */
        padding-top: 20rpx;

        /* #endif */
        .top-icon {
            width: 40rpx;
            height: 40rpx;
        }

        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #222222;
    }
}

.index-header {
    width: 100%;
    padding-left: 30rpx;
    display: flex;
    align-items: center;
    /* #ifdef H5 */
    justify-content: space-between;
    /* #endif */
}

.index-header-icon {
    width: 64rpx;
    height: 64rpx;
    margin-right: 24rpx;
}

.tabClass {
    position: relative;
    background-color: #ffd332;
    padding-top: 20rpx;
    // padding-bottom: 10rpx;

    .classBtn {
        position: absolute;
        top: 0;
        right: 0;
        width: 130rpx;
        height: 100rpx;
    }

    .classBtn image {
        width: 100%;
        height: 100%;
    }

    .fixedStyle {
        position: absolute;
        top: 30rpx;
        left: 28rpx;
        display: flex;
        align-items: center;

        .xmg-calssIcon {
            width: 30rpx;
            height: 30rpx;
            margin-right: 8rpx;
        }
    }
}

.indextopIcon {
    width: 74rpx;
    height: 74rpx;
    border-radius: 50%;
}

.indextopIcon image {
    border-radius: 50%;
}

image {
    width: 100%;
    height: 100%;
}

.scroll-Y {
    height: 100%;
}

.goods-line {
    width: 100rpx;
    height: 2rpx;
    background: #999999;
}

.goods-line-title {
    margin: 0 20rpx;
    font-size: 28rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #999999;
}

/deep/.mescroll-uni {
    height: 100% !important;
}
</style>
